Core Web Vitals

❓질문

Core Web Vitals란 무엇인가요?

💡 조사하기전 내가 알고 있던 내용

처음 들어봤습니다.

🏫 정리한 내용

구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표입니다.
이 지표는 사용자 경험과 직결될 뿐만 아니라 SEO에도 영향을 미치기 때문에, 프론트엔드 개발자라면 꼭 이해하고 최적화할 필요가 있습니다.

Core Web Vitals는 LCP , INP , CLS로 구성됩니다.

첫번째로 LCP는 페이지에서 가장 큰 콘텐츠 요소가 로드되는 시간을 측정합니다.
두번째 INP는 상호작용에 대한 페이지의 전반적인 응답성을 평가합니다 사용자가 방문하는 기간 동안 발생하는 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하는 방식으로 측정됩니다.
세번째 CLS는 페이지가 예상치 못하게 시작적으로 이동하는 정도를 측정합니다 사용자가 읽던 문장이 갑자기 밀려나거나 버튼 위치가 바뀌어 잘못 클릭되는 현상 등이 CLS의 사례에 해당합니다.

각 지표를 개선하는 방법입니다.
LCP가 느리다면, 이미지 및 폰트 최적화, 서버 응답 시간 단축을 통해 개선할 수 있습니다.
INP가 높다면, 불필요한 자바스크립트 실행을 줄이거나, 코드 분할을 통해 메인 스레드의 부담을 낮춤으로써 개선할 수 있습니다.
CLS를 줄이려면, 이미지 크기를 명시적으로 설정하거나, 웹 폰트 로드 전략을 조정하여 개선할 수 있습니다.

이런걸 보면 Next.js같은 프레임워크에서 기본적으로 제공하던 최적화 전략들이 왜 존재하는지 알 수 있는 부분이기도 합니다.